<template>
  <div class="thumb-example">
    <div class="wrap">
      <!-- swiper1 -->
      <swiper class="swiper gallery-top" :options="swiperOptionTop" ref="swiperTop">
        <swiper-slide class="slide-1" v-for="item in dataList" :key="item.id">
          <img :src="tyui + item.image" alt />
        </swiper-slide>
        <div class="swiper-button-next swiper-button-white" slot="button-next"></div>
        <div class="swiper-button-prev swiper-button-white" slot="button-prev"></div>
        <div class="master">
          <div class="content">
            <h4>JAVA专业1811班的同学们正在认真听讲</h4>
            <p>"2019年10月30日，在这个秋风送爽，丹桂飘香的秋天，大华教育师生迎来了第一届全体师生运动会，在女子100米决赛的赛场上，同学们，努力拼搏，意气风发，冲线的那一刻让静止正在这里，记录每一名大华学子在这激情燃烧的岁月，洋溢青春的画面。"</p>
          </div>
        </div>
      </swiper>
      <!-- swiper2 Thumbs -->
      <swiper class="swiper gallery-thumbs" :options="swiperOptionThumbs" ref="swiperThumbs">
        <swiper-slide v-for="item in dataList" :key="item.id" class="swiper-slide-con">
          <img :src="tyui + item.image" alt />
          <p class="slide-tit">{{ item.title }}</p>
        </swiper-slide>
      </swiper>
    </div>
  </div>
</template>

<script>
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
import axios from 'axios'

export default {
  name: 'swiper-example-thumbs-gallery',
  title: 'Thumbs gallery with Two-way control',
  components: {
    Swiper,
    SwiperSlide
  },
  data() {
    return {
      swiperOptionTop: {
        loop: true,
        loopedSlides: 5, // looped slides should be the same
        spaceBetween: 10,
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        }
      },
      swiperOptionThumbs: {
        loop: true,
        loopedSlides: 5, // looped slides should be the same
        spaceBetween: 10,
        centeredSlides: true,
        slidesPerView: 'auto',
        touchRatio: 0.2,
        slideToClickedSlide: true
      },
      bigImg: [],
      dataList: [],
      tyui: 'http://itdahua.com'
    }
  },
  methods: {
    getSchool() {
      axios.get('api/style/list').then(res => {
        console.log(res.data.data)
        this.dataList = res.data.data
      })
    }
  },
  mounted() {
    this.$nextTick(() => {
      const swiperTop = this.$refs.swiperTop.$swiper
      const swiperThumbs = this.$refs.swiperThumbs.$swiper
      swiperTop.controller.control = swiperThumbs
      swiperThumbs.controller.control = swiperTop
    })
  },
  created() {
    this.getSchool()
  }
}
</script>

<style lang="scss">
.thumb-example {
  width: 100%;
  min-width: 1200px;
  margin-top: 50px;
  height: 1000px;
  .gallery-top {
    width: 1200px;
    height: 741px;
    border: 1px solid #ccd2e7;
    .img {
      width: 100%;
      height: 100%;
    }
  }
}

.gallery-thumbs {
  width: 1200px;
  height: 145px;
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  .swiper-slide-con {
    width: 172px;
    height: 145px;
    img {
      width: 172px;
      height: 108px;
    }
    .slide-tit {
      width: 172px;
      line-height: 18px;
      font-size: 12px;
      color: #666;
    }
  }
}

.master {
  position: absolute;
  width: 1200px;
  bottom: 0;
  left: 0;
  height: 114px;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 999;
  display: flex;
  align-items: center;
  padding: 0 30px;
  .content {
    flex: 1;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    margin-top: 20px;
    h4 {
      font-size: 16px;
      padding: 12px 0;
    }
    p {
      font-size: 12px;
      line-height: 18px;
      overflow: hidden;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      text-overflow: ellipsis;
    }
  }
}
</style>

